<template>
	<view class="user clearfix  hv100 ">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">管理银行卡</block>
		</cu-custom>
		<view class="flex flex-direction mt5">
			<view v-for="(item,index) in bList"  class="flex flex-direction  mt5 bg-white py15 px15"  :key="index">
				<view class="flex align-center justify-between">
					<text class="">{{item.bankName}}</text>
					<text>({{item.number}})</text>
				</view>
				<view class="flex align-center justify-between mt15">
					<text class="text-blue" v-if="item.isDefault==1">默认银行卡</text>
					<view class="setbank text-white radius-5 f12 py8 px10" @click="moren(item,index)" v-else>设为默认</view>
					<view class="delbank text-white radius-5 f12 py8 px10" @click="delbank(item,index)">解除绑定</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			bList:[],
		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		async getData() {
			let {
				data
			} = await this.$http.post('user.bankindex', {}, { tipConfig: { storeBlock: true } })
			this.bList=data
		},
		async delbank(item,index){
			if(item.isDefault==1){
				uni.showToast({
					title:'不能解绑默认银行卡',
					icon:'none'
				})
				return false
			}
			let {data} = await this.$http.post('user.delbank', {bankId:item.id}, { tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 } })
		},
		async moren(item,index){
			let {data} = await this.$http.post('user.morenbank', {bankId:item.id}, { tipConfig: { storeLoading: true, isSuccessTip: true} })
			this.getData()
		}
	}
}
</script>

<style lang="less">
.delbank{
	background-image: linear-gradient(to right, #e56b6b, #e54d42) !important;
}
.payline{
	width: 100%;
	height: 1rpx;
	background-color: #F2F2F2;
}
.setbank{
	background-image: linear-gradient(to right, #3AB6EA, #1C7AB7) !important;
}
.red-button{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 90rpx;
	border-radius: 10rpx;
	background-color: #D73329;
	color: #FFFFFF;
	margin-top:80rpx ;
}
</style>